<!-- 公告管理 -->
<template>
  <div class="announcement-man">
    <!-- 查询 -->
    <el-row :gutter="15">
      <el-col :span="19">
        <el-form :model="formData" size="mini" :inline="true" class="demo-form-inline">
          <el-form-item label="公告内容" label-width="70px">
            <el-input v-model="formData.content" @keyup.enter.native="getTableData(1, 15)"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <!-- 操作 -->
      <el-col :span="5">
        <div style="display: flex; justify-content: flex-end; height: 29px;">
          <el-button @click="addAnnouncement" type="success" size="mini">添加</el-button>
          <el-button @click="getTableData(1, 15)" type="primary" size="mini">查询</el-button>
          <el-button @click="clearData" size="mini">清空</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      :data="tableData"
      border
      style="width: 100%; overflow-x: auto;">
      <el-table-column
        align="center"
        label="标题">
        <template slot-scope="scope">
          <span style="color: #409EFF;">{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        label="公告内容">
        <template slot-scope="scope">
          {{scope.row.content}}
        </template>
      </el-table-column> -->
      <el-table-column
        align="center"
        prop="updateTime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        align="center"
        label="公告有效时间">
        <template slot-scope="scope">
          {{scope.row.validTime}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleModify(scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; margin: 0 auto; margin-top: 10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="[10, 15, 20]"
        :page-size="number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <add-announcement></add-announcement>
    <modify-announcement :myNotice="myNotice"></modify-announcement>
  </div>
</template>

<script>
import {
  getNoticeList,
  delNotice
} from './api/message'
import AddAnnouncement from './dialog/AddAnnouncement.vue'
import ModifyAnnouncement from './dialog/ModifyAnnouncement.vue'
export default {
  components: {
    AddAnnouncement,
    ModifyAnnouncement
  },
  data () {
    return {
      formData: {
        content: ''
      },
      tableData: [],
      loading: true,
      myNotice: '',
      pageNo: 1,
      number: 10,
      total: 0
    }
  },
  mounted () {
    this.getTableData(1, 10)
  },
  methods: {
    // 清空数据
    async clearData () {
      this.formData = {content: ''}
    },
    // 修改
    handleModify (row) {
      this.myNotice = JSON.stringify(row)
      this.$store.commit('show_modify_announcement')
    },
    // 删除公告
    async delTableData (masgid) {
      const res = await delNotice({
        id: masgid
      })
      if (res.status === 200) {
        this.$notify({
          title: '删除成功',
          message: res.msg,
          type: 'success'
        })
        this.getTableData(1, 15)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 删除
    handleDelete (row) {
      this.$confirm('是否删除此公告?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delTableData(row.id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取公告列表
    async getTableData (pg, nb) {
      this.loading = true
      const res = await getNoticeList({
        content: this.formData.content,
        curpage: pg,
        pageSize: nb
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.dataCount
        if (res.data.length === 0) {
          this.total = 0
        }
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    handleCurrentChange (val) {
      this.getTableData(val, this.number)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getTableData(this.pageNo, val)
      this.number = val
    },
    // 添加公告
    addAnnouncement () {
      this.$store.commit('show_add_announcement')
    }
  }
}
</script>

<style lang="less">

</style>
